<template>
    <ul class="score-list">
      <li class="score-item" v-for='(item, index) in records' :key='index'>
        <div class="icon-wrap">
          <img class='icon'
              :src="require('@/assets/img/survey2.0/icon_right@2x.png')" alt="">
          <!-- <img class='icon'
               v-show='surveyType !== "EXAMINATION"'
              :src="require('@/assets/img/survey2.0/icon_right@2x.png')" alt=""> -->
          <!-- <img v-if='surveyType === "EXAMINATION" && item.accuracy >= 0.6'
               class='icon'
               :src="require('@/assets/img/survey2.0/icon_right@2x.png')" alt="">
          <img v-if='surveyType === "EXAMINATION" && item.accuracy < 0.6'
               class='icon'
               :src="require('@/assets/img/survey2.0/icon_wrong@2x.png')" alt=""> -->
        </div>
        <div class="score-item-content">
          <div class="score-item-left">
            <div class="score-item-left-info">
              <p class="score-item-left-info-title" v-show='surveyType !== "VOTE"'>
                第{{toChinesNum(records.length - index)}}次答题分数：{{item.score}}
              </p>
              <p class="score-item-left-info-title" v-show='surveyType === "VOTE"'>
                第{{toChinesNum(records.length - index)}}次参与答题
              </p>
              <p class="score-item-left-info-sub">
                {{transformTime(item.createTime)}}
              </p>
            </div>
          </div>
          <div class="score-item-right" @click='enterRecord(item)'>
            答题记录
            <svg-icon  name='arrow_right' color='#7f7f7f'></svg-icon>
          </div>
        </div>
      </li>
      <li class="score-item" v-if='records && records.length === 0'>
        <div class="icon-wrap">
          <!-- <svg-icon name='check' class='icon'
              color='#1a83e6'
          ></svg-icon> -->
          <img class='icon' :src="require('@/assets/img/survey2.0/icon_wenhao@2x.png')" alt="">
        </div>
        <div class="score-item-content">
          <div class="score-item-left">
            <div class="score-item-left-info">
              <p class="score-item-left-info-title">
                暂无答题记录
              </p>
            </div>
          </div>
        </div>
      </li>
    </ul>
</template>

<script>
export default {
  components: {},
  props: {
    records: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    surveyId: {
      type: String,
      default: ''
    },
    surveyType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 数字转化为汉字
    toChinesNum (num) {
      let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] // changeNum[0] = "零"
      let unit = ['', '十', '百', '千', '万']
      num = parseInt(num)
      let getWan = (temp) => {
        let strArr = temp.toString().split('').reverse()
        let newNum = ''
        for (var i = 0; i < strArr.length; i++) {
          newNum = (i === 0 && strArr[i] === 0 ? '' : (i > 0 && strArr[i] === 0 && strArr[i - 1] === 0 ? '' : changeNum[strArr[i]] + (strArr[i] === 0 ? unit[0] : unit[i]))) + newNum
        }
        return newNum
      }
      let overWan = Math.floor(num / 10000)
      let noWan = num % 10000
      if (noWan.toString().length < 4) noWan = '0' + noWan
      return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
    },
    enterRecord (item) {
      var obj = { surveyId: this.surveyId, answerId: item.answerId }
      this.$emit('enterRecord', obj)
    },
    transformTime (data) {
      return data ? data.split(' ')[0] : ''
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="stylus">
  .score-list
    margin-top 10px
    display flex
    flex-direction column
    border-radius 8px
    overflow hidden
    .score-item
      display flex
      height 68px
      padding-right 10px
      box-sizing border-box
      background-color #fff
      .score-item-content
        border-bottom 1px solid #f8f8f8
        flex 1
        display flex
        align-items center
        justify-content space-between
      .score-item-left-info
        font-size 14px
        color #262626
        line-height 20px
        .score-item-left-info-title
          font-size 14px
          color #262626
          line-height 20px
        .score-item-left-info-sub
          margin-top 2px
          opacity .4
          font-size 12px
          color #262626
      .score-item-right
        color #1A83E6
        font-size 14px
      .icon-wrap
        flex 0 0 49px
        height 100%
        display flex
        align-items center
        justify-content center
        .icon
          width 20px
          height 20px
          border-radius 50%
</style>
